import styled from 'styled-components'


export const AppHeaderWrap = styled.div`
 background-color: #f9f9f9;
 height: 4.14286rem;
 display:flex;

  .header-left {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:18%;
    height:100%;
    .left-icon{
      display:flex;
      justify-content:space-between;
      align-items:center;
      .comm{ 
        width: 1.28571rem;
        height: 1.28571rem;
        border-radius: 50%;
        line-height: 1.28571rem;
        overflow: hidden;
        cursor: pointer;
        margin:0 12px;
        text-align:center;
        position:relative;
        span {
          position:absolute;
          top:-15px;
          left:5px;
          transition:all .3s ease-in-out;
        }
        &:hover{
          span {
            top:3px;
            left:5px;
          }
        }
      }
      .home {
        background-color: #ed655a;
      }
      .line {
        background-color: #e0c04c;
      }
      .enlarge{
        background-color: #72be47;
      }
    }
    .arrow{
      display:flex;
      align-items:center;
      font-size:17px;
      .back{
        width:70px;
        height:20px;
        padding-left:15px;
        cursor: pointer;
      }
      .forward{
        width:70px;
        height:20px;
        padding-right:15px;
        cursor: pointer;
      }
    }
  }
  .header-right{
    width:82%;
    height:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
   .profile{
     
    >span {
      font-size:20px;
      display:inline-block;
      width:60px;
      height:30px;
      margin:0 5px;
      line-height:30px;
      cursor: pointer;
    }
   }
  }
`